import React, { useEffect, useMemo } from 'react'
import svgiconless from './index.module.less'
import { Button } from 'antd'
import SvgType, { SvgOptional } from '@/interfaces/ComponentsType/SvgIcons'
import { getDefalut } from '@/utils/getDefault'

function SvgIcon(props: SvgType) {
  const { svg_name } = props
  const defaultObj: SvgOptional = {
    width: '45px',
    height: '45px',
    color: '#333',
    className: 'svg-icon'
  }
  const getSvg = async () => {
    await import(`@/lib/svg/${svg_name}.svg`)
  }
  const iconPath = useMemo(() => {
    return `#icon-${svg_name}`
  }, [svg_name])
  useEffect(() => {
    getSvg()
  }, [])
  const { className, width, height, color } = getDefalut<SvgOptional, string>(props.svg, defaultObj)
  return (
    <div>
      <svg
        aria-hidden="true"
        className={svgiconless[className as string]}
        style={{ width, height, color }}
      >
        <use xlinkHref={iconPath} />
      </svg>
      <Button type="primary">Primary Button</Button>
    </div>
  )
}

export default SvgIcon
